<template>
  <div class="card-out-container"> 
    <CustomTable storeTableName="stationManageTable" rowKey="stationId" :loading="loading" :dataSource="dataSource" :columns="columns" :rowSelection="null" :pagination="false" :scroll="{y: 'calc(100vh - 300px)'}" @change="handleTableChange" :showMore="showMore">
      <template #operateLeft> <div class="operate-left"> </div> </template>
      <template #operateRight>
        <div class="slot-operate-right"> 
          <a-select v-if="!showMore" @search="loadData" v-model:value="lineId" :placeholder="$t('video.pleaseSelectWaterLine')" @change="loadData">
            <a-select-option v-for="(item, index) in waterList" :key="index" :value="item.id">{{ item.lineNo }}</a-select-option>
          </a-select> 
        </div>
      </template>
      <template #bodyCell="{ scope }">
        <template v-if="scope.column.key === 'professionId'">
          <a-select v-model:value="scope.record.professionId" @change="(val) => {onProChange(val, scope.record)}" :placeholder="$t('common.pleaseSelect')">
            <a-select-option v-for="(item, index) in workTypeList" :value="item.id" :key="index">{{ item.name }}</a-select-option>
          </a-select>
        </template>
        <template v-if="scope.column.key === 'isFixedValue'">
          <a-switch :checked="!Boolean(scope.record.isFixedValue)" :disabled="isEnvLocal" @change="(value) => changeStatus(value, {stationId: scope.record.stationId}, 'isFixedValue')" />
        </template>
        <template v-else-if="scope.column.key === 'operate'">
          
        </template>
      </template>
    </CustomTable> 
  </div>
</template>

<script>
import { store } from "@/store"
import { mapState } from "vuex"
import { ListMixinPm } from '@/mixin/listMixinPm.js' 
import CustomTable from '@/components/commonTable/customTable.vue' 
import {  getLocalStorage, filterObj } from "@/utils"
import axios from '@/utils/request'
import i18n from '@/locales/index'
const { t } = i18n.global
export default {
  name: 'stationManage',
  mixins: [ListMixinPm],
  components: { 
    CustomTable 
  },
  computed: {
    ...mapState({
      waterList: state => state.normalData.waterList,
      workTypeList: state => state.normalData.workTypeList
    })
  },
  data () {
    return {
      storeName: 'getSkillGrade',
      url: {
        list: '/api/basic/station-management/list', 
        changeStatus: '/api/basic/station-management/update-station-profession', 
      },
      columns: [
        { title18: 'deviceManage.waterLineNo',  dataIndex: 'lineNo', key: 'lineNo', align: 'center', width: 130 },
        { title18: 'hangManage.stationNo', dataIndex: 'stationNo', key: 'stationNo', align: 'center', width: 130 },
        { title18: 'hangManage.stationRole', dataIndex: 'role', key: 'role', align: 'center', width: 130 },
        { title: t('other.recentlyLoggedEmployee'), dataIndex: 'recentlyLoginStaff', key: 'recentlyLoginStaff', align: 'center', width: 130 },
        { title: t('other.currentLoggedEmployee'), dataIndex: 'presentLoginStaff', key: 'presentLoginStaff', align: 'center', width: 130 },
        { title: t('other.relatedJob'), dataIndex: 'professionId', key: 'professionId', align: 'center', width: 130 },
        { title: t('other.whetherItIsFixed'), dataIndex: 'isFixedValue', key: 'isFixedValue', align: 'center', width: 130 },
        { title18: 'basicData.machineConnect', dataIndex: 'model', key: 'model', align: 'center', width: 130, fixed: 'right' }
      ], 
      lineId: undefined
    }
  },
  methods: { 
    getQueryParams () { 
      let param = {
        id: this.lineId
      }
      return  param.id ? filterObj(param) : null
    }, 
    async onProChange(val, record) {
      let { stationId, professionId } = record
      try {
        await axios.postAction(this.url.changeStatus,{ stationId, professionId  })
        this.loadData() 
      } catch {
        this.loadData() 
      } 
    }
  },
  async created () {
    await store.dispatch("getWater")
    await store.dispatch('getWorkType')
    this.lineId = getLocalStorage("currentLine")?.id || undefined
    this.loadData()
  }
}
</script>